<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">
		<view :style="{ height: navTop + 'px' }"></view>
		
		<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(50) + 'px' }"
			v-show="!hiddenModel">
			<text>账号列表</text>
		</view>

		<view class="flex-start-center " style="color:#333333" @click="navBack()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> 账号列表</text>
		</view>
		<view class="tabsPosition margin-top_30rpx">
			<v-tabs v-model="cIndex" :tabs="tabs" bgColor="transparent" lineColor="#7167FF" activeColor="#7167FF" @change="e=>changeTab(e)"
				fontSize="28rpx"></v-tabs>
		
		
		
		</view>


		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<view class="workList" v-for="(item,index) in list" :key="index">
				<view class="flex-between padding-bottom_30rpx border-bottom-ECECEC">
					<view class="font-overflow" style="width: 80%;">
						{{item.oss_url?item.oss_url:item.url}}
					</view>
					<view class="" @click="paste(item.oss_url?item.oss_url:item.url)">
						<image class="copypur" :src="group3218" mode=""></image>

					</view>

				</view>
				<view v-if="item.is_status==1" class="flex padding_30rpx_0" style="color: #7167FF;" @click="toAnalyzed(item.oss_url?item.oss_url:item.url)">
					待分析
				</view>
				<view v-if="item.is_status==2" class="flex padding_30rpx_0" style="color: #7167FF;" @click="toAnalyzed(item.oss_url?item.oss_url:item.url)">
					再次分析
				</view>
			</view>
		</mescroll-body>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				cIndex: 0,
				tabs: [
					'全部',
					'待分析',
					'已分析',
					
				
				
				],
				group3218: this.$imgs.group3218,
				navTop: '',
				materialBg: 'https://tuanma.weijuyunke.com/index/images/material.png',
				list: [],
				task_id: '',
				url: '',
				is_status:'',
				hiddenModel: true, //显示影藏
				opacityStyle: 0, //透明度
				heightSystemss: ""

			}
		},
		onLoad(options) {
			const app = getApp();
			this.navTop = app.globalData.navTop;
			this.task_id = options.task_id
			this.url = options.url
			this.createdgetSystemInfo()


		},
		onShow() {
			
			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			});
		},
		onPageScroll(ev) {
		
		
			if (ev.scrollTop > 10) {
				let opacity = ev.scrollTop / 140
		
				// this.opacityStyle = opacity > 1 ? 1 : opacity
				this.opacityStyle = 1
				this.hiddenModel = false
				// this.createdgetSystemInfo();
		
			} else {
				this.hiddenModel = true
			}
		},
		computed: {


		},
		methods: {
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
						console.log(navHeight, '==========================')
			
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			toAnalyzed(url){
				this.$sun.navGo('/pagesA/creatCenter/piecemeal/networkUpload?objs='+ encodeURIComponent(JSON
					.stringify(
						{
							url:url,
							from:1
						})))
			},
			changeTab(e) {
				console.log(e)
				this.is_status=e
				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});
			
			},
			paste(url) {
				uni.setClipboardData({
					data: url,
					success: () => {
						// 复制成功的回调
						uni.showToast({
							title: '复制链接成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.log(err)
						// 复制失败的回调
						uni.showToast({
							title: '复制链接失败',
							icon: 'error'
						});
					}
				});


			},
			async upCallback(scroll) {



				const result = await this.$http.post({
					url: this.$api.homepageVideo,
					data: {
						uid: uni.getStorageSync("uid"),
						task_id: this.task_id,
						page: scroll.num,
						psize: 10,
						is_status:this.is_status==0?'':this.is_status
						// url:this.url
					}
				});
				if (result.errno == 0) {

					this.mescroll.endByPage(result.data.list.length, result.data.total);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log(this.list)
				}

			},
			navBack() {
				this.$sun.navBack()
			},

		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		height: 100vh;
		padding: 20rpx;
		
		
		#barTitle {
			position: fixed;
			width: 750rpx;
			top: 0;
			left: 0;
			background: #fff;
			color: #000000;
			text-align: center;
			font-weight: bold;
			z-index: 9999
		}
		
		#barTitle>text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx
		}


		.workList {
			margin-top: 30rpx;
			padding: 20rpx 20rpx 0 20rpx;
			width: 710rpx;

			border-radius: 20rpx;

			background: rgb(255, 255, 255);

			.copypur {
				width: 40rpx;
				height: 40rpx;
			}

		}
	}
</style>